body,html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative;

    div {
        width: 400px;
        height: 400px;
        // border: 1px solid red;
        background-color: pink;
        opacity: .5;
        border-radius: 400px 0 400px 0;
        transform-origin: left bottom;
        transform: rotate(-45deg);
        transition: transform 2s;
        position: absolute;
        bottom: 0;
        left: 50%;
    }

    &:hover div:nth-child(2) {
        transform: rotate(45deg);
    }
    &:hover div:nth-child(3) {
        transform: rotate(15deg);
    }
    &:hover div:nth-child(4) {
        transform: rotate(-15deg);
    }
    &:hover div:nth-child(5) {
        transform: rotate(-75deg);
    }
    &:hover div:nth-child(6) {
        transform: rotate(-105deg);
    }
    &:hover div:nth-child(7) {
        transform: rotate(-130deg);
    }

}